<template>
  <div class="listTemplate">
    <header class="t-header">
        <mu-button flat small class="t-close" v-close><i class="iconfont iconangle-left"></i></mu-button>
        <span class="t-title">检查台账</span>
        <mu-button flat small class="t-close t-right-icon" @click="open = true"><i class="iconfont iconshaixuan4 active-color"></i> </mu-button>
    </header>
    <section class="t-body">
        <mu-container ref="container" class="demo-loadmore-content" style="padding:5px;background-color:#fff;">
          <div style="position:sticky;top:0;z-index:2;">
            <mu-tabs :value.sync="activeTab" inverse color="primary" indicator-color="#fff"  full-width style="background-color:#fff;">
              <mu-tab>未完成（13）</mu-tab>
              <mu-tab>已完成（100）</mu-tab>
            </mu-tabs>
            <mu-paper class="demo-paper" :z-depth="1" >
              <mu-tabs :value.sync="activelist" inverse color="primary" indicator-color="#f8f8f8" > 
                <mu-tab>平面图</mu-tab>
                <mu-tab>列表</mu-tab>
              </mu-tabs>
            </mu-paper>
          </div>
            <div class="demo-text lan-steper" v-if="activelist === 0">
              <mu-stepper :active-step="vactiveStep" orientation="vertical" >
                <mu-step>
                  <mu-step-label>
                    <i slot="icon" v-if="vactiveStep != 0" class='iconfont iconicon_status-empty-dot' style="font-size: 24px;color:#FF8A1B"></i>
                    <i slot="icon" v-if="vactiveStep == 0" class='iconfont icondot1' style="font-size: 24px;color:#FF8A1B"></i>
                    <div style="width:100%" @click="vhandleNext(0)" :class="{'active':vactiveStep == 0}">A区</div>
                  </mu-step-label>
                  <mu-step-content>
                    <div class="flex_b looblist" v-for="(item,index) in 3" :key="index">
                     <p>
                       <span style="margin-right:10px">F{{index+1}}</span>
                       <span>3</span>
                     </p>
                     <!-- <span class="iconfont iconarrowrightdl active-color"></span> -->
                     <mu-button flat small class="t-close" to="/checkareaList"><i class="iconfont iconarrowrightdl active-color" ></i></mu-button>
                    </div>
                  </mu-step-content>
                </mu-step>
                <mu-step>
                  <mu-step-label>
                    <i slot="icon" v-if="vactiveStep != 1" class='iconfont iconicon_status-empty-dot' style="font-size: 24px;color:#FF8A1B"></i>
                    <i slot="icon" v-if="vactiveStep == 1" class='iconfont icondot1' style="font-size: 24px;color:#FF8A1B"></i>
                    <div style="width:100%" @click="vhandleNext(1)" :class="{'active':vactiveStep == 1}">B区</div>
                  </mu-step-label>
                  <mu-step-content>
                    <p>
                      创建群组，50人左右，以18-25单身青年为主。。。。。
                    </p>
                    
                  </mu-step-content>
                </mu-step>
                <mu-step>
                  <mu-step-label>
                    <i slot="icon" v-if="vactiveStep != 2" class='iconfont iconicon_status-empty-dot' style="font-size: 24px;color:#FF8A1B"></i>
                    <i slot="icon" v-if="vactiveStep == 2" class='iconfont icondot1' style="font-size: 24px;color:#FF8A1B"></i>
                    <div style="width:100%" @click="vhandleNext(2)" :class="{'active':vactiveStep == 2}">C区</div>
                  </mu-step-label>
                  <mu-step-content>
                    <p>
                      多在群里发消息宣传宣传，有事没事多在群里唠唠嗑，确定的话就ok拉
                    </p>
                   
                  </mu-step-content>
                </mu-step>
                <mu-step>
                  <mu-step-label>
                    <i slot="icon" v-if="vactiveStep != 3" class='iconfont iconicon_status-empty-dot' style="font-size: 24px;color:#FF8A1B"></i>
                    <i slot="icon" v-if="vactiveStep == 3" class='iconfont icondot1' style="font-size: 24px;color:#FF8A1B"></i>
                    <div style="width:100%" @click="vhandleNext(3)" :class="{'active':vactiveStep == 3}">D区</div>
                  </mu-step-label>
                  <mu-step-content>
                    <p>
                      多在群里发消息宣传宣传，有事没事多在群里唠唠嗑，确定的话就ok拉
                    </p>
                    
                  </mu-step-content>
                </mu-step>
                <mu-step>
                  <mu-step-label>
                    <i slot="icon" v-if="vactiveStep != 4" class='iconfont iconicon_status-empty-dot' style="font-size: 24px;color:#FF8A1B"></i>
                    <i slot="icon" v-if="vactiveStep == 4" class='iconfont icondot1' style="font-size: 24px;color:#FF8A1B"></i>
                    <div style="width:100%" @click="vhandleNext(4)" :class="{'active':vactiveStep == 4}">E区</div>
                  </mu-step-label>
                  <mu-step-content>
                    <p>
                      多在群里发消息宣传宣传，有事没事多在群里唠唠嗑，确定的话就ok拉
                    </p>
                    
                  </mu-step-content>
                </mu-step>
                <mu-step>
                  <mu-step-label>
                    <i slot="icon" v-if="vactiveStep != 5" class='iconfont iconicon_status-empty-dot' style="font-size: 24px;color:#FF8A1B"></i>
                    <i slot="icon" v-if="vactiveStep == 5" class='iconfont icondot1' style="font-size: 24px;color:#FF8A1B"></i>
                    <div style="width:100%" @click="vhandleNext(5)" :class="{'active':vactiveStep == 5}">F区</div>
                  </mu-step-label>
                  <mu-step-content>
                    <p>
                      多在群里发消息宣传宣传，有事没事多在群里唠唠嗑，确定的话就ok拉
                    </p>
                    
                  </mu-step-content>
                </mu-step>
              </mu-stepper>
            </div>
            <div class="demo-text" v-if="activelist === 1">
              <mu-container ref="container" class="demo-loadmore-content" style="padding:0;">
                <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load" style="padding: 0 1px;">
                    <mu-paper class="demo-paper" :z-depth="2" v-for="(i,index) in num" :key="index" style="margin-bottom:10px;">
                      <section class="box"  @click="$router.push('/checkDetaildf')">
                        <p class="line-list flex_b" v-if="i%2 == 0">
                          <span class="">
                            <mu-badge small content="一般问题" color="error"></mu-badge>
                            <mu-badge small content="已整改" color="success"></mu-badge>
                          </span>
                          <mu-badge small content="一个问题" color="error"></mu-badge>
                        </p>
                        <p class="line-list flex_b" v-else>
                          <mu-badge small content="无问题" color="success"></mu-badge>
                        </p>
                        <p class="line-list textdot">
                          <span class="">项目名称：中建八局企业微信项目</span>
                        </p>
                        <p class="line-list textdot">
                          <span>检查部位：大梁根基</span>
                        </p>
                        <p class="line-list" v-if="i%2 == 0">
                          <span>问题类型：A3-F5</span>
                        </p>
                        <p class="line-list textdot" v-if="i%2 == 0">
                          <span>问题描述：中建八局企业微信项目中建八局企业微信项目中建八局企业微信项目</span>
                        </p>
                        <p class="line-list">
                          <span>检查时间：2019-12-12 23:00</span>
                        </p>
                        <p class="line-list flex_b">
                          <span>检查频率：一周三次</span>
                          <span>检查率：70%</span>
                        </p>
                        <p class="line-list flex_b">
                          <span>检查人：
                            <mu-avatar color="primary" size="25">兰</mu-avatar>
                            兰文亮
                          </span>
                          <span v-if="i%2 == 0">责任人：
                            <mu-avatar color="primary" size="25">兰</mu-avatar>
                            兰文亮
                          </span>
                        </p>
                        <section class="img-box">
                          <img src="../../../../assets/img/default.png" />
                        </section>
                      </section>
                    </mu-paper>
                
                </mu-load-more>
            </mu-container>
            </div>
        </mu-container>
    </section>
    <!-- 筛选 -->
    <mu-bottom-sheet :open.sync="open">
        <mu-list @item-click="closeBottomSheet">
            <mu-sub-header>筛选条件</mu-sub-header>
            <mu-list-item button>
              <div class="flex_b" style="width:100%;">
                <span>检查结果：</span>
                  <mu-select v-model="form.select" style="padding-bottom:0;margin-bottom:0;">
                    <mu-option v-for="(option,index) in options" :key="index" :label="option" :value="option"></mu-option>
                  </mu-select>
              </div>
            </mu-list-item>
            <mu-list-item button>
                <div class="flex_b" style="width:100%;">
                  <span>问题等级：</span>
                    <mu-select v-model="form.select" style="padding-bottom:0;margin-bottom:0;">
                      <mu-option v-for="(option,index) in options" :key="index" :label="option" :value="option"></mu-option>
                    </mu-select>
                </div>
            </mu-list-item>
             <mu-list-item button>
                <div class="flex_b" style="width:100%;white-space:nowrap;">
                  <span>开始时间：</span>
                  <mu-date-input  icon="today" v-model="form.startTime"  container="bottomSheet" label-float full-width></mu-date-input>
                </div>
            </mu-list-item>
            <mu-list-item button>
                <mu-button full-width round color="success"  @click="open = false">确认</mu-button>
            </mu-list-item>
           
        </mu-list>
    </mu-bottom-sheet>
  </div>
</template>

<script>
export default {
  name: 'mainPage',
  data () {
    return {
      num: 20,
      refreshing: false,
      loading: false,
      text: 'List',
      activeTab:0,
      open:false,
      activelist:0,
      vactiveStep:0,
      options: [
        'Option 1', 'Option 2', 'Option 3', 'Option 4',
        'Option 5', 'Option 6', 'Option 7', 'Option 8',
        'Option 9', 'Option 10'
      ],
      form:{
        select:'',
        startTime:''
      },
    }
  },
  mounted(){
    
  },
  created(){
    
    console.log(this.$A.GUP())
  },
  methods:{
    closeBottomSheet (isnot) {
      // this.open = isnot;
    },
    refresh () {
      this.refreshing = true;
      this.$refs.container.scrollTop = 0;
      setTimeout(() => {
        this.refreshing = false;
        this.text = this.text === 'List' ? 'Menu' : 'List';
        this.num = 20;
      }, 2000)
    },
    load () {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.num += 20;
      }, 2000)
    },
     vhandleNext (index) {
      if(this.vactiveStep == index){
        this.vactiveStep = -1;
      }else{
        this.vactiveStep = index
      }
    },
  },
}
</script>
<style lang="scss" scoped>
  .listTemplate{
      height:100%;
      width:100%;
      position:relative;
      overflow:hidden;
      .t-header{
          height:0.45rem;
          width:100%;
          color:#3D3D3D;
          box-sizing:border-box;
          padding:5px 8px;
          position:relative;
          font-weight:700;
          background-color:#fff;
          // box-shadow: 0 2px 4px -1px rgba(0,0,0,.07), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 7px 0 rgba(0,0,0,.12);
          display:flex;
          justify-content:space-between;
          align-items:center;
          .t-close{
            min-width: 28px;
            border-radius: 50%;
          }
          .t-title{
              position:absolute;
              top:50%;
              left:50%;
              transform:translate(-50%,-50%);
              font-size: 0.19rem; 
              font-weight: 500;
          }
          .t-right-icon{
              font-size:0.2rem;
          }
      }
      .t-body{
          height:calc(100% - 0.45rem);
          width:100%;
          overflow:auto;
          background-color:#F8F8F8;
      }
      .t-body + .t-footer{
          height:0.45rem;
          width:100%;
      }
      .t-footer + .t-body{
          height:calc(100% - 0.9rem);
      }

      .t-close{
        min-width: 28px;
        border-radius: 50%;
      }
  }
  .looblist{
    padding-left:15px;
    color:#999;
    line-height:15px;
  }
  .flex_b{
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .active-color{
    color:#FF8A1B;
  }
  .box{
    padding:15px;
  }
</style>
<style lang="scss" >

.t-close{
    .mu-button-wrapper{
        padding:0 !important;
    }
}
.lan-steper{
  .mu-step-label.active .mu-step-label-circle, .mu-step-label.completed .mu-step-label-circle{
    background-color:#FF8A1B;
  }
  .mu-step-label.active .mu-step-label-icon, .mu-step-label.completed .mu-step-label-icon{
    color:#FF8A1B;
  }
  .mu-step-label.disabled{
    color: rgba(0,0,0,.87);
  }
  .active{
    color:#FF8A1B;
  }
}
.listTemplate{
  .mu-tab-wrapper{
    font-size:0.15rem;
  }
  .mu-tab{
    font-weight:bold;
  }
  .mu-tab:not(.mu-tab-active){
    color:#333;
  }
}

</style>